<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
#testT input[type=text] {
	width: 300px;
}
</style>

<script type="text/javascript">
var keyNum = 0;

function plus() {
	keyNum++;
	var tr = $("<tr/>", {
		id: "tr" + keyNum
	});
	var td_k = $("<td/>");
	var td_v = $("<td/>");
	var key = $("<input/>", {
		id: "key" + keyNum
	}).css("width", "300px");
	var value = $("<input/>", {
		id: "value" + keyNum
	}).css("width", "300px");
	$(td_k).append(key);
	$(td_v).append(value);
	$(tr).append(td_k);
	$(tr).append(td_v);
	$("#testT").append(tr);
}

function minus() {
	if(keyNum > 0) {
		$("#tr" + keyNum).remove();
		keyNum--;
	}
}

function send() {
	var json = new Object();
	for(var i = 0; i < keyNum+1; i++) {
		$(json).attr( $("#key" + i).val(), $("#value" + i).val() );
	}
	
	$.ajax({
		url: $("#url").val(),
		type: "post",
		dataType: "html",
		data: json,
		success: function(data) {
			$("#result").html(data);
		},
		error: function() {
			alert("error");
		}
	});
}
</script>

</head>
<body>

테스트 페이지 &nbsp;&nbsp;
<input type="button" value="+" onclick="plus()"/>
<input type="button" value="-" onclick="minus()"/>

<br/><br/>

<table id="testT" style="text-align:center;">
	<tr class="table_title">
		<td>Key</td>
		<td>Value</td>
	</tr>
	<tr>
		<td>url</td>
		<td><input type="text" id="url"/></td>
	</tr>
	<tr>
		<td><input type="text" id="key0"/></td>
		<td><input type="text" id="value0"/></td>
	</tr>
</table>

<br/><br/>

<input type="button" value="전송" onclick="send()"/>

<br/><br/>

<div id="result"></div>

</body>
</html>